<template>
    <div style="padding-left:10px; padding-right: 10px; width: calc(100vw - 200px)">
    <!--    功能趋于-->
    <div style="margin: 10px 0">
        <el-button type="warning" plain @click="add" v-if="user.role===1">新增</el-button>
        <el-button type="primary" plain  v-if="user.role===1">导入</el-button>
        <el-button type="primary" plain  v-if="user.role===1">导出</el-button>
    </div>
    <!--    搜索区域-->
    <div style="margin: 10px 0">
        <el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable></el-input>
        <el-button style="margin-left: 5px; background-color: #5defc1; color: white" @click="load" plain>查询</el-button>
    </div>
    <el-table  :data="tableData" border stripe style="width: 100%">
        <el-table-column  prop="id"   label="ID"/>
        <el-table-column prop="name" label="菜单名称"/>
        <el-table-column prop="url" label="菜单路徑"/>
        <el-table-column
                fixed="right"
                label="操作"  v-if="user.role===1">
            <template #default="scope">
                <div style="display: flex; align-content: space-between">
                    <el-button @click="handleEdit(scope.row)" type="primary">编辑</el-button>
                    <el-popconfirm
                            title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
                        <template #reference>
                            <el-button type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </div>
            </template>
        </el-table-column>
    </el-table>
    <div style="margin: 10px 0">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <!--弹窗-->
        <el-dialog
                title="提示"
                v-model="dialogVisible"
                width="30%">
            <el-form :model="form" label-width="120px">
                <el-form-item label="书籍名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input v-model="form.price"></el-input>
                </el-form-item>
                <el-form-item label="作者">
                    <el-input v-model="form.author"></el-input>
                </el-form-item>
                <el-form-item label="发布时间">
                    <el-date-picker style="width: 100%;" value-format="YYYY-MM-DD" v-model="form.createTime" type="date" clearable></el-date-picker>
                </el-form-item>
            </el-form>
            <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </span>
            </template>
        </el-dialog>

    </div>
    </div>
</template>

<script>
    export default {
        // eslint-disable-next-line vue/multi-word-component-names
        name: "Menu",
        components: {
        },
        data() {
            return {
                form: {},
                search:'',
                currentPage4: 1,
                pageSize: 10,
                total:0,
                dialogVisible:false,
                tableData: [],
                user:{}
            }
        },
        created(){
            this.load();
        },
        methods:{
            load(){
                this.$http.get("/user/userList",{params:{ pageNum: this.currentPage, pageSize: this.pageSize,search: this.search}}).then((response) =>
                {
                    if (response.status =='200' && response.data.data.length>0){
                        this.tableData = response.data.data
                    }
                    console.log(response);
                })
            }
        }
    }

</script>

<style scoped>

</style>